-@page_title= :profile_photo_crop.l 
  
-widget do 
  %h3=:preview.l
  #preview 
  
-widget do 
  = link_to :profile_photo_change.l, upload_profile_photo_user_path(@user)
    
= image_tag @photo.photo.url(:original), :id => 'croppable'

= bootstrap_form_for :photo, :url => crop_profile_photo_user_path(@user), :method => :put, :layout => :horizontal do |f|
  - [:crop_x, :crop_y, :crop_w, :crop_h].each do |attribute|
    %input{ :type=>"hidden", :name=>attribute, :id=>attribute, :value => ''}

  %br
  = f.primary :update.l

-content_for :head_css do
  = stylesheet_link_tag 'cropper'

-content_for :end_javascript do
  = javascript_include_tag "cropper"
  :javascript
    jQuery(function($) {
      // Settings for the cropper
      minWidth = 300; // min width of crop area, also the starting width
      minHeight = 200; // min height of crop area, also the starting height
      previewRatio = 1/4; // i.e. preview to croppable ratio
      bgColor = 'black';
      bgOpacity = .4;
      croppable_id = 'croppable'
      preview_id = 'preview'
      
      // Then initialize the cropper, telling it where to find the croppable image's id and
      // the preview div's id.
      cropInit();
    });
